<script setup lang="ts">
import { ref } from "vue";

const modalVisible = ref(false);
const refundModalVisible = ref(false);

const dataList = ref<any>([
  {
    quantity: "50",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    amount: "199.00",
    verifier: "谭小玲",
    verifiedAt: "2025-05-02 19:34:35",
  },
  {
    quantity: "50",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    amount: "199.00",
    verifier: "谭小玲",
    verifiedAt: "2025-05-02 19:34:35",
  },
  {
    quantity: "50",
    productName: "50元入场券抢占价值1980元八重豪礼+4节课（限新生体验）",
    amount: "199.00",
    verifier: "谭小玲",
    verifiedAt: "2025-05-02 19:34:35",
  },
]);
</script>

<template>
  <umi-container padding="16px" height="100%" bg-color="gray" :gap="16">
    <umi-breadcrumb :items="['订单管理', '订单列表', '订单详情']"></umi-breadcrumb>
    <umi-card title="订单信息" :border="false">
      <template #extra>
        <umi-space :size="6">
          <umi-button type="primary" @click="refundModalVisible = true">退款</umi-button>
          <router-link to="/order/list">
            <umi-button type="primary">返回</umi-button>
          </router-link>
        </umi-space>
      </template>
      <umi-descriptions>
        <umi-descriptions-item label="商家名称">大蓝卡</umi-descriptions-item>
        <umi-descriptions-item label="微信昵称">Jamie Dimon💯 😊</umi-descriptions-item>
        <umi-descriptions-item label="手机号码">17727624776</umi-descriptions-item>
        <umi-descriptions-item label="订单状态">待使用</umi-descriptions-item>
        <umi-descriptions-item label="订单编码">32742501</umi-descriptions-item>
        <umi-descriptions-item label="下单时间">2025-05-02 19:34:35</umi-descriptions-item>
        <umi-descriptions-item label="付款时间">2025-05-02 19:34:35</umi-descriptions-item>
        <umi-descriptions-item label="支付单号">30724569</umi-descriptions-item>
      </umi-descriptions>
    </umi-card>
    <umi-card :border="false" title="商品信息">
      <umi-table :data="dataList" :pagination="false">
        <template #columns>
          <umi-table-column title="商品头图" slot-name="cover" :width="120"></umi-table-column>
          <umi-table-column title="商品名称" data-index="productName" :width="200" ellipsis></umi-table-column>
          <umi-table-column title="商品数量" data-index="quantity"></umi-table-column>
          <umi-table-column title="支付金额" data-index="amount"></umi-table-column>
          <umi-table-column title="核销人" data-index="verifier"></umi-table-column>
          <umi-table-column title="核销时间" data-index="verifiedAt"></umi-table-column>
          <umi-table-column title="操作" slot-name="action" :width="80"></umi-table-column>
        </template>
        <template #cover>
          <umi-image :width="50" :height="50"></umi-image>
        </template>
        <template #action>
          <umi-button type="primary" @click="modalVisible = true">核销</umi-button>
        </template>
      </umi-table>
    </umi-card>
    <umi-modal v-model:visible="modalVisible">
      <umi-form>
        <umi-form-item label="核销码">
          <umi-input placeholder="请输入核销码"></umi-input>
        </umi-form-item>
      </umi-form>
    </umi-modal>
    <umi-modal v-model:visible="refundModalVisible">
      <umi-text>您确认退款？</umi-text>
    </umi-modal>
  </umi-container>
</template>
